<template>
	<view class="video-details-wrap">
		<view class="header">
			<uni-nav-bar leftIcon="arrowleft" :title="title" @clickLeft="clickLeft"></uni-nav-bar>
		</view>
		<view class="content">
			<view class="list">
				<view class="item" v-for="(item, index) in cameraList" :key="item.cameraId" @click="toPlayVideo(item)">
					<view><text>{{item.cameraName}}</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				title: '',
				cameraList: [],
				departmentId: '',
				regionId: '',
				page: 1,
				pageSize: 10
			}
		},
		onLoad(option) {
			this.title = option.regionName
			this.regionId = option.regionId
			this.departmentId = this.$store.getters.departmentId
			console.log('option.regionId', option.regionId)
			this.init()
		},
		methods: {
			clickLeft() {
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				})
			},
			init() {
				this.getCameraList()
			},
			getCameraList() {
				let params = {
					departmentId: this.departmentId,
					regionId: this.regionId,
					page: this.page,
					pageSize: this.pageSize
				}
				this.$request.ygstCameraRegionListGet(params).then(res => {
					console.log('res**********', res)
					this.cameraList = res.resultList
				})
			},
			toPlayVideo(item) {
				console.log('item', item)
				uni.navigateTo({
					url: `../videoPlay/videoPlay?cameraNvrIp=${item.cameraNvrIp}&channel=${item.channel}&multimediaOuterIp=${item.multimediaOuterIp}&multimediaOuterPort=${item.multimediaOuterPort}&title=${item.cameraName}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.video-details-wrap {
		.content {
			.list {
				.item {
					padding: 0px 30rpx;
					height: 80rpx;
					line-height: 80rpx;
					border-bottom: 1px solid #ccc ;
				}
			}
		}
	}
</style>
